<template>
  <div>
    <h3>myroutercmp</h3>
    <router-link to="/about">about</router-link><hr>
    <router-link to="/router/100">100</router-link> -- 
    <router-link to="/router/200">200</router-link>

  </div>
</template>

<script>
export default {
  // 路由内守卫 进入到组件中的守卫  比beforeCreate要早执行  它里面的this为undefined
  beforeRouteEnter(to, from, next) {
    // console.log(this) // undefined
    console.log('组件 -- beforeRouteEnter')
    next()
  },
  // 离开当前页面时
  beforeRouteLeave(to, from, next) {
    console.log(this)
    console.log('组件 -- beforeRouteLeave')
    next()
  },

  // 如果你动态路由参数的，则它会有此守卫，动态路由参数发生改变时会触发
  beforeRouteUpdate(to,from,next){
    console.log(this)
    console.log('组件 -- beforeRouteUpdate')
    next()
  },


  beforeCreate() {
    console.log('组件 -- beforeCreate')
  },
  beforeDestroy() {
    console.log('组件 -- beforeDestroy')
  },
  destroyed() {
    console.log('组件 -- destroyed')
  }
}
</script>

<style lang="scss" scoped></style>
